<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>酒店信息管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css"/>
</head>
<body class="layui-bg-gray">
<h1 style="text-align: center; margin-top: 10px">酒店管理系统</h1>
<hr>
<%-- 查询表单 --%>
<form class="layui-form layui-form-pane" style="margin:1% 2%">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"><i class="layui-icon layui-icon-home"></i> 酒店</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="name" placeholder="酒店名称" autocomplete="off"/>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"><i class="layui-icon layui-icon-location"></i> 地址</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="address" placeholder="酒店地址" autocomplete="off"/>
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn" id="searchBtn"><i class="layui-icon layui-icon-search"></i> 查询</button>
            <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i> 重置</button>
        </div>
    </div>
</form>
<%-- 数据表格容器 --%>
<hr>
<div style="margin: 5px 10px">
    <table id="dataTable" lay-filter="dataTableFilter"></table>
</div>

<%-- 表头工具栏按钮 --%>
<script type="text/html" id="headerBtns">
    <!-- 按钮组 -->
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i> 新增
        </button>
        <span style="margin-left: 2px"></span>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delBatch">
            <i class="layui-icon layui-icon-delete"></i> 批量删除
        </button>
        <button class="layui-btn layui-btn-sm" onclick="history.back(-1);">
             返回
        </button>
    </div>
</script>

<%-- 数据操作模板 --%>
<script type="text/html" id="editTpl" filter="editTplFilter">
    <form class="layui-form layui-form-pane" style="margin: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">
                <i class="layui-icon layui-icon-home"></i> 酒店
            </label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="name" lay-reqText="请输入酒店名">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <i class="layui-icon layui-icon-cellphone"></i> 酒店电话
            </label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="mobile" lay-reqText="请输入电话">
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="width: 300px">
            <label class="layui-form-label">
                <i class="layui-icon layui-icon-edit"></i> 酒店地址
            </label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="address"></textarea>
            </div>
        </div>
        <button type="button" id="subBtn" lay-submit lay-filter="subBtnFilter" style="display: none"></button>
    </form>
</script>

<%-- 行工具栏按钮 --%>
<script type="text/html" id="rowBtns">
    <!-- 按钮组 -->
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="update">
            <i class="layui-icon layui-icon-edit"></i> 修改
        </button>
        <span style="margin-left: 2px"></span>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i> 删除
        </button>
    </div>
</script>


<script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['table', 'jquery', 'form', 'layer'], function () {
        // 模块初始化
        let table = layui.table;
        let $ = layui.jquery;
        let form = layui.form;
        let layer = layui.layer;

        // 渲染表格
        let opt = {
            elem: "#dataTable",
            id: "dataTableId",
            url: "${pageContext.request.contextPath}/hotel/page.do",
            page: true, // 开启分页
            toolbar: "#headerBtns", // 表头工具栏
            parseData: function (rs) {
                return {
                    "code": rs.code,
                    "msg": rs.msg,
                    "count": rs.data.total,
                    "data": rs.data.list
                };
            },
            response: {
                statusCode: 200
            },
            cols: [[ //列信息
                {type: 'checkbox'},
                {field: 'id', align: "center", title: 'ID'},
                {field: 'name', align: "center", title: '酒店名称'},
                {field: 'address', align: "center", title: '酒店地址'},
                {field: 'mobile', align: "center", title: '酒店电话'},
                {title: '操作', align: "center", toolbar: "#rowBtns"}
            ]]

        };
        let tabIns = table.render(opt);

        // 搜索功能
        $("#searchBtn").click(function () {
            let name = $("#name").val();
            let address = $("#address").val();
            tabIns.reload({
                where: {
                    "name": name,
                    "address": address,
                }
            })
        });

        // 表格头工具栏监听事件
        table.on("toolbar(dataTableFilter)", function (d) {
            let event = d.event;
            if (event == "add") {
                add();
            } else if (event == "delBatch") {
                delBatch();
            }
        });

        // 数据编辑的弹层模板
        let layerOpt = {
            title: "编辑",
            type: 1,
            content: $("#editTpl").html(),
            area: ['370px', '470px'],
            btn: ['新增', '取消'],
            btnAlign: "c",
            success: function (layero, index) {

                form.on("submit(subBtnFilter)", function (d) {
                    let formData = d.field; // 获取表单数据
                    $.post("${pageContext.request.contextPath}/hotel/add.do", formData, function (rs) {
                        layer.msg(rs.msg);
                        if (rs.code != 200) {
                            return false;
                        }
                        $("#searchBtn").click();
                        layer.close(index);
                        return false;
                    })
                })

            },
            yes: function (index, layero) {
                $("#subBtn").click();
            }
        }

        // 新增方法
        function add() {
            // 如果直接使用layerOpt
            // 当进行修改时  会修改layerOpt 中success 属性
            // 再进行新增 数据提交 会向修改的地址提交
            // 所以将layerOpt 进行复制  避免 layerOpt发生属性修改时  影响了新增业务
            let opt = {};
            // 对象复制
            Object.assign(opt, layerOpt)
            // 打开弹出层
            layer.open(opt);
        }

        // 批量删除
        function delBatch() {
            // 获取选中的数据
            let status = table.checkStatus("dataTableId");
            // 获取选中的数据
            let data = status.data;
            if (data.length == 0) {
                layer.msg("请先选中要删除的数据!");
                return false;
            }
            // 二次确认
            layer.confirm("确定要全部删除吗?", function (index) {
                let ids = new Array(); // 创建数组存储所有id信息
                for (r of data) {
                    ids.push("id=" + r.id);
                }
                let param = ids.join("&");// 将id使用&符号拼接
                $.post("${pageContext.request.contextPath}/hotel/deleteBatch.do", param, function (rs) {
                    layer.msg(rs.msg);
                    //关闭弹出层
                    layer.close(index);
                    //重载表格
                    $("#searchBtn").click();//点击查询按钮更新表格数据
                });
            });
        }

        // 行工具栏监听事件
        table.on("tool(dataTableFilter)", function (d) {
            let event = d.event;
            let rowData = d.data;
            if (event == "del") {
                del(rowData);
            } else if (event == "update") {
                update(rowData);
            }
        });

        // 删除酒店房间信息
        function del(rowData) {
            let id = rowData.id;
            layer.confirm("确定要删除吗?", function (index) {
                $.post("${pageContext.request.contextPath}/hotel/delete.do", {id: id}, function (rs) {
                    layer.msg(rs.msg);
                    layer.close(index);
                    $("#searchBtn").click();
                })
            });

        }

        // 修改酒店信息
        function update(rowData) {
            // 如果直接使用layerOpt
            // 当进行修改时  会修改layerOpt 中success 属性
            // 再进行新增 数据提交 会向修改的地址提交
            // 所以将layerOpt 进行复制  避免 layerOpt发生属性修改时  影响了新增业务
            let opt = {};
            // 对象复制
            Object.assign(opt, layerOpt)
            opt.success = function (l, index) {

                form.val("editTplFilter", rowData);
                // 设置表单提交监听事件
                form.on("submit(subBtnFilter)", function (d) {
                    let formData = d.field; // 获取表单数据
                    formData.id = rowData.id; // 新增id属性值
                    // 使用ajax提交数据
                    $.post("${pageContext.request.contextPath}/hotel/update.do", formData, function (rs) {
                        layer.msg(rs.msg);
                        if (rs.code != 200) {
                            return false;
                        }
                        // 刷新表格
                        $("#searchBtn").click();
                        // 关闭弹层
                        layer.close(index);
                    })
                    return false; // 阻止表单默认提交行为
                });
            }
            // 弹出层
            layer.open(opt);
        }

    });
</script>

</body>
</html>
